<template>
    <TopNavComponent />
    <SwiperComponent :banners="banners"/>
    <div class="nav">
        <div class="item" @click="onItem(1)">
            <img src="../../assets/images/nav1.png" alt="">
            <span>转让出租</span>
        </div>
        <div class="item" @click="onItem(2)">
            <img src="../../assets/images/nav2.png" alt="">
            <span>招聘求职</span>
        </div>
        <div class="item" @click="onItem(3)">
            <img src="../../assets/images/nav3.png" alt="">
            <span>流行产品</span>
        </div>
        <div class="item" @click="onItem(4)">
            <img src="../../assets/images/nav4.png" alt="">
            <span>课程培训</span>
        </div>
        <div class="item" @click="onItem(5)">
            <img src="../../assets/images/nav5.png" alt="">
            <span>批发进货</span>
        </div>
    </div>
    <div class="info" @click="onBeautyInfo">
        <h3>美甲资讯</h3>
        <p>年会不能错过的款，美呆了~</p>
        <span class="iconfont icon-jiantouyou"></span>
    </div>
    <div class="recommend">
        <div class="hot">
            <h3>热门活动</h3>
        </div>
        <div class="opt">
            <h3>优选店铺</h3>
        </div>
    </div>
    <RollComponent :rollInfo="newShop">
        <div class="new-shop-content" v-if="newGoodsLoading">
            <div class="new-shop-item" v-for="(item, index) in newGoods" :key="index" @click="onPlaceItem(item.id)">
                <img :src="item.image" alt="">
                <p class="new-shop-title">{{ item.title }}</p>
                <span class="new-shop-price">{{ item.price }}元/月</span>
            </div>
        </div>
        <div class="skeleton-newShop" v-else>
            <div class="skeleton-item">
                <van-skeleton-image class="image" />
                <van-skeleton-paragraph />
                <van-skeleton-paragraph />
            </div>
            <div class="skeleton-item">
                <van-skeleton-image class="image" />
                <van-skeleton-paragraph />
                <van-skeleton-paragraph />
            </div>
        </div>
    </RollComponent>
    <div class="ad">
        <img src="../../assets/images/onlineimg.png" alt="">
    </div>
    <RollComponent :rollInfo="person">
        <div class="person-content">
            <div class="person-item" v-for="(item,index) in personStore" :key="index">
                <img :src="item.image" alt="">
                <p>{{ item.name }}</p>
                <span>{{ item.desc }}</span>
            </div>
        </div>
    </RollComponent>
    <div class="recommend-main">
        <CardComponent :title="recommendTitle" :cards="recommendGoods" v-if="recommendLoading" />
        <van-empty 
            v-else
            image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" 
            image-size="80"
            description="等待加载" />
    </div>
    
</template>
<script setup lang="ts">

import { ref, reactive, onMounted } from "vue"
import { useRouter } from "vue-router"

import TopNavComponent from '@/components/TopNavComponent.vue';
import SwiperComponent from '@/components/SwiperComponent.vue';
import RollComponent from '@/components/RollComponent.vue';
import CardComponent from "@/components/CardComponent.vue"

import api from "../../api/index"

const router = useRouter()

const newGoodsLoading = ref<boolean>(false)
const recommendLoading = ref<boolean>(false)

const recommendTitle = "为你推荐"

interface IBanner{
  image:string,
  title:string,
  url:string
}

const banners = ref<IBanner[]>([])

onMounted(() =>{
    api.getHomeBanner().then(res =>{
        banners.value = res.data.data
    })
})


const onItem = (index: number) => {
    console.log(index);
}

interface IRoll {
    title: string,
    all: string
}

const newShop: IRoll = reactive({
    title: "最新商品",
    all: "查看全部"
})

const person: IRoll = reactive({
    title: "人才库",
    all: "查看全部"
})

/**
 * 最新商品
 */

interface INewGoods {
    id:number,
    image: any,
    title: string,
    price: string | number
}

const newGoods = ref<INewGoods[]>([])

onMounted(() => {
    api.getNewGoods().then(res => {
        if (res.data.status === 200) {
            newGoodsLoading.value = true
            newGoods.value = res.data.data
        }
    })
})

/**
 * 推荐商品
 */
interface IRecommendGoods {
    id:number,
    image: any,
    title: string,
    price: string
}

const recommendGoods = ref<IRecommendGoods[]>([])

onMounted(() => {
    api.getRecommendGoods().then(res => {
        recommendLoading.value = true
        recommendGoods.value = res.data.data
    })
})

/**
 * 人才库
 */
 interface IPerson {
    image: any,
    name: string,
    desc: string
}

const personStore = ref<IPerson[]>([])

onMounted(() => {
    api.getPersonStore().then(res => {
        if (res.data.status === 200) {
            personStore.value = res.data.data
        }
    })
})

/**
 * 美业快讯事件
 */
const onBeautyInfo = () =>{
    router.push("/beauty")
}

/**
 * 最新商品(选址详情)
 */
const onPlaceItem = (id:number) =>{
    router.push({
        name:"placedetails",
        params:{id}
    })
}

</script>
<style lang="less" scoped>
.nav {
    background: #fff;
    width: 100%;
    overflow: hidden;
    clear: both;
    padding: 10px;
    box-sizing: border-box;

    .item {
        width: 20%;
        float: left;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        align-items: center;

        img {
            width: 40px;
        }

        span {
            display: block;
            font-size: 12px;
            margin-top: 10px;
        }
    }

}

.info {
    background-color: #fff;
    display: flex;
    border-top: 1px solid #f3f4f5;
    padding: 10px 0;
    align-items: center;

    h3 {
        font-size: 14px;
        color: #999;
        font-weight: 400;
        padding: 0 20px;
        border-right: 1px solid #f3f4f5;
    }

    p {
        font-size: 14px;
        margin-left: 10px;
    }

    span {
        flex: 1;
        text-align: right;
        padding-right: 10px;
    }
}

.recommend {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    background: #fff;
    margin-top: 5px;

    .hot {
        flex: 1;
        margin-right: 5px;
        height: 80px;
        background: url("../../assets/images/home-cb1.png");
        background-position: center;
        background-size: cover;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .opt {
        flex: 1;
        margin-left: 5px;
        height: 80px;
        background: url("../../assets/images/home-cb2.png");
        background-position: center;
        background-size: cover;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.new-shop-content {
    display: flex;

    .new-shop-item {
        margin-right: 15px;

        img {
            display: block;
            width: 230px;
            height: 130px;
        }

        .new-shop-title {
            white-space: normal;
            word-break: break-word;
            font-size: 14px;
            text-align: left;
            padding: 10px;
        }

        .new-shop-price {
            display: block;
            font-size: 14px;
            width: 100%;
            text-align: left;
            padding: 10px;
            padding-top: 0px;
            color: #684886;
        }
    }
}

.skeleton-newShop {
    height: 208px;
    width: 100%;
    display: flex;

    .skeleton-item {
        margin: 10px;
        width: 230px;

        .image {
            width: 230px;
        }
    }
}

.ad {
    background: #fff;
    margin: 5px auto;

    img {
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
    }
}

.person-content {
    display: flex;

    .person-item {
        margin-left: 10px;

        img {
            width: 110px;
            height: 170px;
            border-radius: 5px;
        }

        p {
            font-size: 16px;
            margin: 5px 0;
        }

        span {
            display: block;
            font-size: 14px;
            color: #999;
            padding-bottom: 10px;
        }
    }
}
</style>